<template>
	<div class="footer">
		<div class="footer-main">
			<div class="middle">
				<div class="footer-logo">
					<img :src="require('_a/images/logo.png')" alt="" />
				</div>
				<div class="footer-flex">
					<ul>
						<li><a href="/about/3">190简介</a></li>
						<li><a href="/about/3">管理团队</a></li>
						<li><a href="/about/5">隐私声明</a></li>
						<li><a href="/about/6">会员收费规则</a></li>
					</ul>
					<ul>
						<li><a href="/about/14">域名竟价相关收费规则</a></li>
						<li><a href="/about/8">联系我们</a></li>
						<li><a href="/about/9">招纳贤士</a></li>
					</ul>
					<dl>
						<dt>联系我们：</dt>
						<dd>投诉电话：0755-2955 6666</dd>
						<dd>客服邮箱：kf@190.vip</dd>
						<dd>域名安全部：stone@190.vip</dd>
					</dl>
					<dl>
						<dt>北京荟米科技有限公司</dt>
						<dd>总部地址: 北京市 房山区 长阳万兴路86号-N2264</dd>
						<dd>
							<span>联系我们：</span>
							<div class="qrCode" :style="{ backgroundImage: `url(${qrcode})` }"></div>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="footer-bottom">
			<div class="footer-copyright">
				<span>北京荟米科技有限公司 </span>
				<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2023021463号</a>
				<span style="margin-left: 10px">增值电信业务经营许可证 [京B2-20233288]</span>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		mapMutations,
		mapGetters
	} from "vuex";
	import footInfo from "@/static/footInfo";
	import {
		getHome,
		getBottom
	} from "@/api/data";

	export default {
		name: "VipFooternav",
		data() {
			return {
				info: {},
				buttonList: [],
				address: "",
				companyName: "",
				companyName2: "",
				recordNo: "",
				recordUrl: "",
				version: "",
				customerServiceTelephone: "",
				domainNameSecurityDepartment: "",
				email: "",
				qq: "",
				qrcode: "",
				sellTelephone: "",
				workTime: "",
				color: "",
				color1: "",
				color2: "",
				colorType: 0, // 1:橙色 2:绿色
				record: require("_a/images/record.png"),
				infoShow: false,
			};
		},
		computed: {
			...mapGetters(["getLogoLink"]),
			getButtonList() {
				if (this.buttonList == null) return [];
				if (this.buttonList.length <= 6) {
					return this.buttonList;
				} else {
					return this.buttonList.slice(0, 6);
				}
			},
		},
		created() {
			let host = window.location.host;
			// let host = 'www.190.vip'
			if (host.lastIndexOf("huimi.vip") > -1) {
				this.infoShow = false
			} else {
				this.infoShow = true
			}
			this.getHomeList();
		},
		mounted() {
			// this.getBottomInfo();
			this.address = footInfo.address;
			this.companyName = footInfo.companyName;
			this.companyName2 = footInfo.companyName2;
			this.version = footInfo.version;
			this.recordNo = footInfo.recordNo;
			this.recordUrl = footInfo.recordUrl;
			this.customerServiceTelephone = footInfo.customerServiceTelephone;
			this.domainNameSecurityDepartment = footInfo.domainNameSecurityDepartment;
			this.email = footInfo.email;
			this.qq = footInfo.qq;
			this.qrcode = footInfo.qrcode;
			this.sellTelephone = footInfo.sellTelephone;
			this.workTime = footInfo.workTime;

			this.setCustomerServiceTelephone(footInfo.customerServiceTelephone);
			this.getBottomInfo();
		},
		methods: {
			...mapMutations(["setCustomerServiceTelephone", "setLogoLink"]),
			async getBottomInfo() {
				const {
					code,
					data
				} = await getBottom();
				if (code === 200) {
					this.address = data.address; // 公司地址
					this.companyName = data.company; // 公司名称
					this.version = data.version; // 版本号
					this.recordNo = data.recordNum; // 备案号
					this.customerServiceTelephone = data.serviceTelephone; // 客服电话
					this.domainNameSecurityDepartment = data.securityEmail; // 域名安全邮箱
					this.email = data.serviceEmail; // 客服邮箱
					this.qrcode = data.serviceQrcodeAddress; // 扫码咨询二维码
					this.sellTelephone = data.serviceTelephone; // 销售电话

					this.companyName2 = footInfo.companyName2;
					this.recordUrl = footInfo.recordUrl;
					this.qq = footInfo.qq;
					this.workTime = footInfo.workTime;
					this.setCustomerServiceTelephone(data.serviceTelephone);
					this.setLogoLink(data.logoUrl); // logo链接
					this.$storage.setColor(data.color); // 颜色
					this.$storage.setColorType(data.colorType); // 颜色类型
					this.color = data.color;
					this.colorType = data.colorType;
					// this.$storage.setColorType(1); // 颜色
					// this.$storage.setColor("#7b9e51"); // 绿色
					// this.color = "#7b9e51";
					// this.colorType = 1;
					// this.$storage.setColor("#0b9ef6"); // 蓝色
					// this.$storage.setColor("#7360a8"); // 紫色
					// this.color1 = this.hexToRgba(this.color, 0.2)[0];
					// this.color2 = this.hexToRgba(this.color, 0.8)[0];
					// this.changeS();
				}
			},
			// 更换颜色
			changeS() {
				document.documentElement.style.setProperty("--textOrange", this.color);
				document.documentElement.style.setProperty("--mainColor", this.color);
				document.documentElement.style.setProperty(
					"--leftNavbgColor",
					this.color1
				);
				document.documentElement.style.setProperty("--hoverMain8", this.color2);
			},
			hexToRgba(hex, ...opacity) {
				const rgbaArry = [];
				opacity.forEach((item) => {
					rgbaArry.push(
						`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${item})`
					);
				});
				return rgbaArry;
			},
			// 获取首页的内容
			async getHomeList() {
				let res = await getHome({
					source: 0,
				});
				if (res.code == 200) {
					this.buttonList = res.data.helpList;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.footer-bottom {
		padding: 18px 0;
	}


	.footer-copyright {
		text-align: center;
		color: #999999;
		font-size: 16px;
	}

	.footer-copyright a {
		color: #999999;
	}

	.footer-copyright a:hover {
		color: #F68A0C;
	}

	.footer-main {
		background: linear-gradient(180deg, #FFFFFF 0%, #FFF8ED 105.43%);
		padding: 56px 0 64px;
	}

	.footer-logo {
		margin-bottom: 30px;
	}

	.footer-code {
		width: 86px;
		height: 86px;
	}

	.footer-flex {
		display: flex;
		justify-content: space-between;
	}

	.footer-flex ul li {
		line-height: 40px;
	}

	.footer-flex ul li a {
		color: #999999;
		font-size: 16px;
	}

	.footer-flex ul li a:hover {
		color: #F68A0C;
		text-decoration: underline;
	}


	.footer-flex dl dt {
		color: #333333;
		font-size: 18px;
		line-height: 40px;
	}

	.footer-flex dl dd {
		color: #999999;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.qrCode {
		@include size(86px);
		@include bg-setting(null, cover, center);
		display:inline-block;
	}

	.footer-flex dl dd span {
		float: left;
	}
</style>
